<template>
  <div class="v-mfr-add">
    <c-row-crumb :title="multLang('btn_new_a', 'title_asset_i')">
      <el-button @click="clear">{{ multLang('btn_clear_a') }}</el-button>
      <el-button type="primary" plain @click="submit(true)">
        {{ multLang('保存并返回') }}
      </el-button>
      <el-button type="primary" @click="submit()">
        {{ multLang('btn_save_a') }}
      </el-button>
    </c-row-crumb>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="140px"
      :validate-on-rule-change="false"
    >
      <c-row-add single>
        <c-row :col="4">
          <c-col>
            <el-form-item :label="multLang('title_name_m', ':')" prop="title">
              <el-input
                v-model="form.title"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_pr', ':')" prop="inner_code">
              <el-input
                v-model="form.inner_code"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>
      <c-row-add :title="multLang('tab_info_a')">
        <c-row :col="4">
          <c-col>
            <el-form-item :label="multLang('title_pv', ':')" prop="short_title">
              <el-input
                v-model="form.short_title"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_pw', ':')" prop="parent_id">
              <c-select
                v-model="form.parent_id"
                :options="allFacilitiesList"
                clearable
                :placeholder="multLang('title_aaad_h')"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_px', ':')" prop="address">
              <el-input
                v-model="form.address"
                :placeholder="multLang('text_d')"
              ></el-input>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_py', ':')" prop="currency_id">
              <c-select
                v-model="form.currency_id"
                :options="currencyList"
                :placeholder="tplLang('text_choose_a', ['title_py'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_category_ab_k', ':')"
              prop="org_type_id"
            >
              <!-- clearable -->
              <c-select
                v-model="form.org_type_id"
                :options="orgTypeList"
                :placeholder="tplLang('text_choose_a', ['title_category_ab_k'])"
              ></c-select>
            </el-form-item>
          </c-col>
          <c-col :col="11">
            <el-form-item :label="multLang('title_ck', ':')" prop="remark">
              <c-input-text v-model="form.remark"></c-input-text>
            </el-form-item>
          </c-col>
        </c-row>
      </c-row-add>
    </el-form>
  </div>
</template>
<script>
import { addMfrData } from '@/http/api/v1/mfr'
export default {
  name: 'VMfrAdd',
  components: {},
  props: {},
  data() {
    return {
      form: {
        title: '',
        inner_code: '',
        short_title: '',
        parent_id: '',
        address: '',
        currency_id: '',
        org_type_id: '',
        remark: ''
      }
    }
  },
  computed: {
    allFacilitiesList() {
      return this.optionList('all_facilities')
    },
    currencyList() {
      return this.optionList('currency')
    },
    orgTypeList() {
      return this.optionList('org_type')
    },
    rules() {
      return {
        title: {
          required: true,
          message: this.multLang('title_name_m', 'msg_g'),
          trigger: 'blur'
        },
        inner_code: {
          required: true,
          message: this.multLang('title_pr', 'msg_g'),
          trigger: 'blur'
        },
        short_title: {
          required: true,
          message: this.multLang('title_pv', 'msg_g'),
          trigger: 'blur'
        }
        // parent_id: {
        //   required: true,
        //   validator: (_, __, cb) => cb(),
        //   trigger: 'change'
        // }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'org_type' })
    this.setOption({ key: 'currency' })
    // .then(() => {
    //   this.form.currency_id = this.currencyList[0]
    //     ? this.currencyList[0].value
    //     : ''
    // })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.getFacilities()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    getFacilities() {
      this.setOption({ key: 'all_facilities' })
    },
    clear() {
      this.$refs.form.resetFields()
    },
    submit(back) {
      this.$refs.form.validate(
        valid =>
          valid &&
          addMfrData({
            ...this.form
          }).then(({ code }) => {
            if (code === 200) {
              this.getFacilities()
              back && this.$router.back()
            }
          })
      )
    }
  }
}
</script>
<style lang="scss">
.v-mfr-add {
}
</style>
